import React, { Component } from 'react';
import { Form, Icon, Input, Button,Select} from 'antd';
import { withRouter } from 'react-router'
const { Option } = Select;
const InputGroup = Input.Group;

function hasErrors(fieldsError) {
    console.log("zzzzzzz")
    console.log(fieldsError)
//Object.keys(fieldsError) 获取对象fieldsError 键名
    console.log(Object.keys(fieldsError))
    let result=Object.keys(fieldsError).some(field =>{console.log(fieldsError[field]); return fieldsError[field]});
    console.log(result)
    return result
}

class HorizontalLoginForm extends React.Component {
    componentDidMount() {
        // To disabled submit button at the beginning.
        this.props.form.validateFields();
    }

    handleSelectChange = value => {
        console.log(value);
        this.props.form.setFieldsValue({
            note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
        });
    };

    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            console.log(err)
            if (!err) {
                console.log('Received values of form: ', values);
            }
        });
    };

    render() {
        const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;

        // Only show error after a field is touched.
        const usernameError = isFieldTouched('username') && getFieldError('username');
        const passwordError = isFieldTouched('password') && getFieldError('password');
        const zzzzz = isFieldTouched('zzzzz') && getFieldError('zzzzz');
        const note = isFieldTouched('note') && getFieldError('note');
        const gender = isFieldTouched('gender') && getFieldError('gender');
        const prefixSelector = getFieldDecorator('prefix', {
            initialValue: '86',
        })(
            <Select style={{ width: 70 }}>
                <Option value="86">+86</Option>
                <Option value="87">+87</Option>
            </Select>,
        );

        return (
            <Form layout="inline" onSubmit={this.handleSubmit}>   {usernameError}
                <Form.Item validateStatus={usernameError ? 'error' : ''} help={usernameError || ''}>
                    {getFieldDecorator('username', {
                        rules: [{ required: true, message: 'Please input your username!' }],
                    })(

                        <Input
                            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            placeholder="Username"
                        />,
                    )}
                </Form.Item>
                <Form.Item validateStatus={passwordError ? 'error' : ''} help={passwordError || ''}>
                    {getFieldDecorator('password', {
                        rules: [{ required: true, message: 'Please input your Password!' }],
                    })(
                        <Input
                            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            type="password"
                            placeholder="Password"
                        />,
                    )}
                </Form.Item>




                <Form.Item label="Note" validateStatus={note ? 'error' : ''} help={note || ''}>
                    {getFieldDecorator('note', {
                        rules: [{ required: true, message: 'Please input your note!' }],
                    })(<Input  placeholder="Note" />)}
                </Form.Item>
                <Form.Item label="Gender">
                    {getFieldDecorator('gender', {
                        rules: [{ required: true, message: 'Please select your gender!' }],
                    })(
                        <Select
                            placeholder="Select a option and change input text above"
                            onChange={this.handleSelectChange}
                        >
                            <Option value="male">male</Option>
                            <Option value="female">female</Option>
                        </Select>,
                    )}
                </Form.Item>


                validateStatus="warning || success || error"

                <Form.Item label="标题"  validateStatus="success" hasFeedback>
                    {getFieldDecorator('zzzzz', {
                        rules: [{
                            required: false,
                            message: 'zzzzzzz',
                        }],
                    })(
                        <Input placeholder="zzzzzz"/>
                    )}
                </Form.Item>

                <Form.Item>
                    <Form.Item label="Phone Number">
                        {getFieldDecorator('phone', {
                            rules: [{ required: true, message: 'Please input your phone number!' }],
                        })(<Input addonBefore={prefixSelector} style={{ width: '100%' }} />)}
                    </Form.Item>
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit" disabled={hasErrors(getFieldsError())}>
                        Log in
                    </Button>
                </Form.Item>
            </Form>
        );
    }
}

const WrappedHorizontalLoginForm = withRouter(Form.create(
    {
        mapPropsToFields(props) {
            return {
                username: Form.createFormField({
                    value: "默认值username",
                }),
                password: Form.createFormField({
                    value: "默认值password",
                }),
                zzzzz: Form.createFormField({
                    value: "默认值aaa",
                }),
                note: Form.createFormField({
                    value: "",
                }),
                gender: Form.createFormField({
                    value: "female",
                }),
                phone: Form.createFormField({
                    value: "13618096943",
                }),
                prefix: Form.createFormField({
                    value: "87",
                }),
            };
        },
    }
)(HorizontalLoginForm));



export default WrappedHorizontalLoginForm
